<template>
  <el-row>
    <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        :cell-style="{height:'.1vh',padding:'1px'}"
        :row-style="{height:'.1vh'}"
        :header-cell-style="{height:'.1vh',padding:'1px'}"
        :border="true"
    >
      <el-table-column
          fixed
          prop="freq"
          label="频点"
          width="120"
          align="center"
      >
      </el-table-column>


      <el-table-column
          fixed
          prop="type"
          label="频点类型"
          width="160"
          align="center"
      >
      </el-table-column>

      <el-table-column
          prop="district"
          label="区域"
          align="center"
      >
      </el-table-column>

      <el-table-column
          prop="name"
          label="名称"
          align="center"
      >
      </el-table-column>

      <el-table-column
          prop="time"
          label="加入时间"
          width="200"
          align="center"
      >
      </el-table-column>

      <el-table-column
          label="操作"
          align="center"
      >
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="danger"
              @click="deleteRow(scope.row)">删除
          </el-button>
          <el-button
              size="mini"
              @click="editRow(scope.row)"
              type="info">修改
          </el-button>
        </template>
      </el-table-column>

    </el-table>

    <Pagination
        :reset-flag="resetPage"
        style="margin-top: 1vh"
        :total="total"
        @currentChange="currentChange"
    />

    <!--  弹窗  -->

    <!--  手机信息修改  -->
    <Dialog
        :visiable="isEditVisiable"
        :info="{title:'手机信息修改',width:'25%'}"
        :top="'5%'"
        @close="isEditVisiable=false"
    >
      <EditForm
          :districtOptions="districtOptions"
          :freqCategoryOptions="freqCategoryOptions"
          :info="editForm"
          @editSucceed="editSucceed"
      />
    </Dialog>

    <!-- 工作路劲 -->
    <Dialog
        :visiable="workPathVisiable"
        @close="workPathVisiable=false"
        :info="{title:'工作路劲',width:'45%'}"
        :top="'5%'"
    >
      <WorkPathForm
          @workPath="getWorkPath"
      />
    </Dialog>

    <!-- 删除手机 -->
    <Dialog
        :visiable="deleteMobileVisiable"
        @close="deleteMobileVisiable=false"
        :info="{title:'删除手机',width:'25%'}"
        :top="'5%'"
    >
      <el-row
          style="text-align: center"
      >
        <span>确定删除"{{ currMobileName }}"么</span>
      </el-row>

      <el-row
          style="
          text-align: center;
          margin-top: 2vh"
      >
        <el-button
            @click="sureToDeleteMobile"
            type="primary"
            size="mini">确定
        </el-button>
        <el-button
            @click="deleteMobileVisiable=false"
            type="info"
            size="mini">取消
        </el-button>
      </el-row>
    </Dialog>


  </el-row>
</template>

<script>
// ---------------- axios -----------------
import {getFreqList, deleteFreqCategory} from "../../../../../api/work"
// --------------- element-ui -------------
import Pagination from "../../../../../components/element-ui/Pagination";
import Dialog from "../../../../../components/element-ui/dialog"
// ----------------- 组件 -------------------
import EditForm from "./editForm"
import WorkPathForm from "./workPathForm"

export default {
  components: {
    Pagination, Dialog, EditForm, WorkPathForm
  },
  methods: {
    // --------------- axios --------------------

    /**
     * 获取频点分类
     */
    getFreqList: function () {
      const pd = {
        page: this.page,
        limit: this.limit,
      }
      this.loading = true;
      getFreqList(pd)
          .then(res => {
            this.loading = false;
            this.updateTableData(res.data.data);
            this.total = res.data.count;
            this.needSelect = false;
          })
          .catch(err => {
            console.error(err)
          })
    },

    /**
     * 查询频点分类
     * */
    selectFreqList: function (selectForm) {
      const pd = {
        page: this.page,
        limit: this.limit,
        msg: selectForm
      }
      this.loading = true;
      getFreqList(pd)
          .then(res => {
            this.loading = false;
            this.updateTableData(res.data.data);
            this.total = res.data.count;
            this.needSelect = true;
          })
          .catch(err => {
            console.error(err)
          })
    },

    /**
     * 删除频点分类
     * */
    deleteMobile: function () {
      const pd = {
        id: this.currMobileId
      }
      deleteFreqCategory(pd)
          .then(res => {
            this.$message(res.data.data.msg);
            this.getFreqList();
          })
          .catch(err => {
            console.error(err)
          })
    },

    //  -------------- 更新表格数据 ------------------

    /**
     * 更新表格数据
     * @param dataContent
     */
    updateTableData: function (dataContent) {
      this.tableData = dataContent
    },

    //  --------------- 功能 ------------------

    /**
     * 编辑行
     * @param row
     */
    editRow: function (row) {
      if (row.type_num === 1) {
        row.district_num = 0
      }
      this.editForm = row;
      this.isEditVisiable = true;
    },

    /**
     * 翻页
     * @param val
     */
    currentChange: function (val) {
      this.page = val.currentPage;
      this.limit = val.pageSize;
      if (this.needSelect) {
        this.selectFreqList(this.selectForm);
      } else {
        this.getFreqList();
      }
    },

    /**
     * 修改成功
     */
    editSucceed: function () {
      this.getFreqList();
      this.isEditVisiable = false;
      this.editFlag = !this.editFlag;
    },

    /**
     * 查看工作路径
     * @param row
     */
    workPath: function (row) {
      this.currMobile = row.mobile;
      this.currMobileName = row.name;
      this.workPathVisiable = true;
    },

    /**
     * 删除行
     * @param row
     */
    deleteRow: function (row) {
      this.currMobileName = row.name;
      this.currMobileId = row.id;
      this.deleteMobileVisiable = true;
    },

    /**
     * 收测记录
     * @param row
     */
    textRecord: function (row) {
      this.currMobile = row.mobile;
      this.testRecordVisiable = true;
    },

    /**
     * 加载工作路径
     * @param val
     */
    getWorkPath: function (val) {
      const pd = {
        s_time: val[0],
        e_time: val[1],
        mobile: this.currMobile
      }
      this.getMobileWorkPath(pd);
    },

    /**
     * 确认删除手机
     */
    sureToDeleteMobile: function () {
      this.deleteMobile();
      this.deleteMobileVisiable = false;
    }
  },
  data() {
    return {
      tableData: [], // 表格数据
      loading: false, // 加载
      // -------------- 弹窗 ---------------
      isEditVisiable: false,
      workPathVisiable: false,
      deleteMobileVisiable: false,
      testRecordVisiable: false,
      // -------------- 分页相关 -------------------
      total: 100,
      page: 1,
      limit: 10,
      needSelect: false,
      resetPage: false,
      //  ---------------- 数据相关 ---------------
      editForm: {},
      currMobile: "",
      currMobileName: "",
      currMobileId: undefined
    }
  },
  created() {
    this.getFreqList();
  },
  props: {
    selectForm: {
      type: Object,
      default: () => {
        return {}
      }
    },
    districtOptions: {
      type: Array,
      default: () => {
        return [
          {
            value: 1,
            label: "未知"
          },
          {
            value: 2,
            label: "假药"
          }, {
            value: 3,
            label: "虚假信息"
          },
          {
            value: 4,
            label: "政治反动"
          }, {
            value: 5,
            label: "恐怖主义"
          },
          {
            value: 6,
            label: "淫秽色情"
          }
        ]
      }
    },
    flushTable: {
      type: Boolean,
      default: false
    },
    freqCategoryOptions: {
      type: Array,
      default: () => {
        return []
      }
    },
  },
  watch: {
    selectForm: function (val) {
      if (val.district === 0) {
        val.district = undefined;
      }
      this.page = 1;
      this.resetPage = !this.resetPage;
      this.selectFreqList(val);
    },
    flushTable: function () {
      this.getFreqList();
    },
  }
}
</script>

<style>

</style>